﻿@using CleanArchitecture.Core.Helper
@using CleanArchitecture.Infrastructure.Models.Business.Comments;
@using CleanArchitecture.Infrastructure.Models.SystemManage;
@model CommentItemModel
@{
    Layout = "_BackendLayout";
    ViewData["Title"] = ViewBag.PageTitle as string;
    int currentSystemModuleId = ViewBag.CurrentSystemModuleId;
    CommentSearchModel searchModel = Model.CustomProperties["CommentSearchModel"] as CommentSearchModel ?? null;

    var moduleAssignedBtns = ViewBag.ModuleAssignedBtns as IList<SystemDataDicButtonModel> ?? null;
    var FilterSearch = ViewBag.FilterSearch as IList<SelectListItem> ?? null;
}
@section cssstyles {
    <style type="text/css">
        body {
            margin: 20px !important;
            display: flex;
            flex: auto;
            flex-direction: column;
            min-height: 0;
            background: #f0f2f5;
        }

        .backendcommentmanage {
            width: 100% !important;
            height: 100%;
            background-color: #fff;
            margin: 0 !important;
            padding: 10px 2px;
        }
        .article-list-item {
            border-bottom: 1px solid #e8e8e8;
            margin-top: 16px;
            padding-left: 8px;
        }
        .article-list-item > h2 {
            font-size: 18px;
            color: #333;
            margin-bottom: 12px;
        }
        .article-list-item .article-list-item-text {
            margin-bottom: 12px;
        }
        .article-list-item .article-list-item-desc {
            margin-bottom: 12px;
        }
        .article-list-item .article-list-item-tool {
            color: #666;
            margin-bottom: 5px;
        }
        .article-list-item .article-list-item-tool .article-list-item-tool-item:first-child {
            padding-left: 0;
        }
        .article-list-item .article-list-item-tool .article-list-item-tool-item:last-child {
            border-right: none;
            padding-right: 0;
        }
        .article-list-item .article-list-item-tool .article-list-item-tool-item {
            border-right: 1px solid #e8e8e8;
            padding: 0 15px;
            cursor: pointer;
        }
        span.contact:first-child {
            padding-left: 0;
        }
        span.contact:last-child {
            border-right: none;
            padding-right: 0;
        }
        span.contact {
            border-right: 1px solid #e8e8e8;
            padding: 0 15px;
        }
        span.createtime{
            float:left;
            width: 100%;
        }
        .layui-field-title legend{
            font-size: 14px;
        }
        .responseArea {
            margin: 5px;
        }
        .responseArea .layui-elem-quote {
            font-size: 12px;
        }
    </style>
}
<div class="backendcommentmanage layui-main">
    <form class="layui-form">
        <div class="layui-inline">
            <label class="layui-form-label">状态查询</label>
            <div class="layui-input-inline">
                <select id="FilterSearch" asp-items="@FilterSearch" lay-filter="FilterSearchSelect"></select>
            </div>
        </div>
        <hr class="layui-bg-blue">
        <div style="max-width: 730px;padding-left: 10px;">
            <div id="commentGrid" class="" style="position: relative;">
                <div class="article-list-item ew-datagrid-item" v-for="(item,index) in comments.filter(cmt => cmt.ParentId === 0)" v-bind:key="item.Id">
                    <h2>{{ item.CommentTitle !== "" ? item.CommentTitle : "无标题"}}</h2>
                    <div class="article-list-item-text layui-text">
                        留言内容：{{ item.CommentText }}
                        <div class="responseArea layui-text" v-if="item.CommentIsResponsed">
                            <blockquote class="layui-elem-quote layui-quote-nm" v-for="(responseitem,index2) in comments.filter(rep => rep.ParentId === item.Id)" v-bind:key="responseitem.Id">
                                {{responseitem.ContactName !== "" ? responseitem.ContactName : "管理员"}}回复: {{responseitem.CommentText}} - {{formatTime(responseitem.CreatedTime)}}
                            </blockquote>
                        </div>
                    </div>
                    <div class="article-list-item-desc layui-text">
                        <span class="contact contactname" v-if="item.ContactName">
                            <i class="layui-icon layui-icon-username"></i>
                            {{ item.ContactName }}
                        </span>
                        <span class="contact contactphone" v-if="item.ContactPhone">
                            <i class="layui-icon layui-icon-cellphone"></i>
                            {{ item.ContactPhone }}
                        </span>
                        <span class="contact contactemail" v-if="item.ContactEmail">
                            <i class="layui-icon layui-icon-email"></i>
                            {{ item.ContactEmail }}
                        </span>
                        <span class="contact contactaddress" v-if="item.ContactAddress">
                            <i class="layui-icon layui-icon-location"></i>
                            {{ item.ContactAddress }}
                        </span>
                        <span class="createtime">
                            发布时间 {{formatTime(item.CreatedTime)}}
                        </span>
                    </div>
                    <div class="article-list-item-tool">
                        @foreach (var btn in moduleAssignedBtns)
                        {
                            <span class="article-list-item-tool-item" v-on:click="ItemClick(@btn.Id, '@btn.EventName', item)">
                                <i class="@btn.IconCssClass toolgroup" data-tips="@btn.DisplayName" lay-offset="0,-8px"></i>
                            </span>
                        }
                    </div>
                </div>
                <div class="layui-container" id="pageContainer" style="float:left;"></div>
            </div>
        </div>
    </form>

</div>
<input type="text" class="layui-hide" id="currentSystemModuleId" value="@currentSystemModuleId" />
@await Component.InvokeAsync("RecordButton")

@section scripts{
    <script type="text/javascript">
        layui.use(['layer', 'element', 'laypage', 'iziToast', 'util', 'form'], function () {
            var $ = layui.jquery,
                layer = layui.layer,
                element = layui.element,
                laypage = layui.laypage,
                iziToast = layui.iziToast,
                util = layui.util,
                form = layui.form;
            var lodash = _,
                PageSize = @searchModel.PageSize,
                $FilterSearch = $("#FilterSearch option:checked");

            var requestData = {
                '@searchModel.nameof(m => m.CommentIsResponsed)': $FilterSearch.val(),
                '@searchModel.nameof(m => m.Page)' : 1,
                '@searchModel.nameof(m => m.PageSize)' : PageSize
            };

            let editurl = "/business/resourcemanage/edit",
                editWidowConfig = {
                    title: "编辑/修改",
                    type: 2,
                    content: "",
                    anim: 3,
                    width: 460,
                    height: 600,
                    iframeAuto: true
                },
                currentSystemModuleId = $("#currentSystemModuleId").val();

            var vm = new Vue({
                el: '#commentGrid',
                data: {
                    comments: [],
                    pager: null
                },
                created: function () {
                    var _this = this;
                    var $loading = Util.loading(false, 0);
                    _this.LoadCommentList(requestData, $loading);
                },
                methods: {
                    LoadCommentList: function (req, loading) {
                        var _this = this;
                        httpapi.fetchPost('/api/backend/business/commentmanage/getsystemcommentlist', req).then(res => {
                            loading.remove();
                            if (!httpapi.checkResponse(res))
                                //输入信息校验错误
                                iziToast.error({
                                    title: '消息通知',
                                    message: res.message
                                });
                            else {
                                _this.comments = res.data.Data;
                                if (_this.pager === null) {
                                    _this.pager = laypage.render({
                                        elem: 'pageContainer'
                                        , count: res.data.RecordsTotal
                                        , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                                        , theme: '#1E9FFF'
                                        , limit: PageSize
                                        , limits: [@searchModel.AvailablePageSizes]
                                        , jump: function (obj, first) {
                                            //首次不执行
                                            if (!first) {
                                                requestData.Page = obj.curr;
                                                requestData.PageSize = obj.limit;
                                                var $loading = Util.loading(false, 0);
                                                _this.LoadCommentList(requestData, $loading);
                                            }
                                        }
                                    });
                                }
                            }
                        }).catch(error => console.error(error));
                    },
                    ReloadPage: function (CommentIsResponsed) {
                        var _this = this;
                        requestData.CommentIsResponsed = CommentIsResponsed === undefined ? "YES" : CommentIsResponsed;
                        requestData.Page = 1;
                        requestData.PageSize = PageSize;
                        var $loading = Util.loading(false, 0);
                        _this.LoadCommentList(requestData, $loading);
                    },
                    ItemClick: function (btnId, eventName, item) {
                        var _this = this;
                        if (eventName === 'CommentResponse') {
                            let $FilterSeach = $("#FilterSearch option:checked");
                            if (item.CommentIsResponsed) {
                                layer.confirm('留言已回复过，是否添加回复?', function (confirmindex) {
                                    layer.close(confirmindex);
                                    _this.addCommentResponse(btnId, item.Id, function () {
                                        _this.ReloadPage($FilterSeach.val());
                                    });
                                });
                            } else {
                                _this.addCommentResponse(btnId, item.Id, function () {
                                    _this.ReloadPage($FilterSeach.val());
                                });
                            }
                            return;
                        }
                        else if (eventName === 'Delete') {
                            layer.confirm("确定要进行删除操作吗？", function (confirmIndex) {
                                layer.close(confirmIndex);
                                iziToast.loading("删除中，请稍候...");
                                let node = new Object(DeleteNodeModel);
                                node.EntityId = item.Id;
                                node.ButtonId = btnId;
                                node.ModuleId = currentSystemModuleId;
                                $.deleteJSON("/api/backend/business/commentmanage/deletesystemcomment", node, function (res) {
                                    iziToast.destroy();
                                    if (!httpapi.checkResponse(res)) {
                                        //输入信息校验错误
                                        iziToast.error({
                                            title: '消息通知',
                                            message: res.message
                                        });
                                    } else {//Success
                                        iziToast.success({
                                            title: '消息通知',
                                            message: res.message
                                        });
                                        _this.ReloadPage($("#FilterSearch option:checked").val());
                                    }
                                });
                            });
                        }
                    },
                    formatTime: function (time) {
                        return util.toDateString(time, "yyyy-MM-dd HH:mm:ss");
                    },
                    addCommentResponse(btnId, cmtitemId, callback) {
                        layer.prompt({
                            formType: 2,
                            value: '请输入回复内容',
                            title: '留言回复',
                            area: ['330px', '150px']
                        }, function (value, index, elem) {
                            if(value.length > 300) {
                                iziToast.error({
                                    title: '消息通知',
                                    message: "留言回复内容长度超过系统限制"
                                });
                                return false;
                            }
                            var postJson = {
                                RootId: cmtitemId,
                                ParentId: cmtitemId,
                                CommentText: value
                            };
                            httpapi.fetchPost('/api/backend/business/commentmanage/addresponse?moduleid=' + currentSystemModuleId + "&buttonid=" + btnId, postJson).then(res => {
                                if (!httpapi.checkResponse(res))
                                    //输入信息校验错误
                                    iziToast.error({
                                        title: '消息通知',
                                        message: res.message
                                    });
                                else {//Success
                                    layer.close(index);
                                    iziToast.success({
                                        title: '消息通知',
                                        message: res.message
                                    });
                                    if (callback && typeof callback === "function")
                                        callback();
                                }
                            }).catch(error => {
                                iziToast.error({
                                    title: '消息通知',
                                    message: "对不起，出现未知错误，请您联系系统管理员！"
                                });
                                console.log(error);
                            });
                        });
                    }
                }
            });
            form.on('select(FilterSearchSelect)', function(data){
                vm.ReloadPage(data.value);
            });      
        });
    </script>
}
